<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
</head>
<body>
<!--头部 用于存放导航栏-->
<header id="my_header">
    <!--导航条-->
    <nav class="navbar navbar-default navbar-static-top nav_show" >
        <div class="container-fluid">
            <!-- 右侧自适应3杠小图标 -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand " th:href="@{/to/main}">首页</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a th:href="@{/to/main}">商品管理 </a></li>
                    <li><a href="#">订单管理</a></li>
                    <li><a href="#">系统管理</a></li>
                    <li><a th:href="@{/to/add}">添加商品</a></li>
                </ul>
                <!-- 大中屏幕下右侧显示内容 -->
                <ul class="nav navbar-nav navbar-right hidden-sm hidden-xs">
                    <li><a href="http://localhost:8082">茶友购物系统</a></li>
                    <li><a th:href="@{/to/adminmanage}">系统管理员</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</header>





<!--面板-->
<div id="my_body" class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">管理员页面</div>
    <div class="panel-body">
        <form class="form-inline" th:action="@{/to/adminmanage/select}">
            <div class="form-group">
                <input type="text" class="form-control" name="account" id="account" placeholder="管理员账号">
            </div>
            <button type="submit" class="btn btn-success"><i class="icon-sel"></i>查询</button>
            <a  class="btn btn-danger" th:href="@{/to/adminmanage}"><i class="icon-del" ></i>清除条件</a>
        </form>
    </div>
    <span style="color: red" th:text="${toerror}"></span>
    <table  class="container" >
        <tr>
            <th>管理员账号</th>
            <th>管理员密码</th>
        </tr>
        <!--    修改商品信息-->
        <form th:action="@{/to/adminmanage/update}">
            <tr>
                <td><input type="text" class="form-control" name="account" id="account1" placeholder="管理员账号"> </td>
                <td><input type="text" class="form-control" name="password" id="password" placeholder="管理员密码"> </td>
                <td><button type="submit"  class="btn btn-success">修改</button></td>
            </tr>
        </form>

    </table>

    <table  class="container" >
        <tr>
            <th>管理员账号</th>
            <th>管理员密码</th>
        </tr>
        <!--    修改商品信息-->
        <form th:action="@{/to/adminmanage/insert}">
            <tr>
                <td><input type="text" class="form-control" name="account" id="account2" placeholder="管理员账号"> </td>
                <td><input type="text" class="form-control" name="password" id="password2" placeholder="管理员密码"> </td>
                <td><button type="submit"  class="btn btn-success">添加</button></td>
            </tr>
        </form>

    </table>
    <span style="color: red">[[${message}]]</span>
    <!-- Table -->
    <table id="dataTable" class="table table-striped table-bordered text-center show_table">
        <tr style="background-color: #CAE8EA;">
            <th>管理员账号</th>
            <th>管理员密码</th>
            <th>操作</th>
        </tr>

        <tr th:each="teaAdminlist : ${teaAdmins}">
            <td th:text="${teaAdminlist.account}"></td>
            <td th:text="${teaAdminlist.password}"></td>
            <td><a @click="deletefuntion" class="btn btn-danger" th:href="@{'/to/adminmanage/delete/'+${teaAdminlist.account}}">删除</a></td>
        </tr>
    </table>

    <form id="delete_from" method="post">
        <input type="hidden" name="_method" value="delete">
    </form>
    <!--面板尾部-->
    <div class="panel-footer show_foot" style="background-color: transparent;">
        <div class="f_left pull-left">
            <br><br>
            <p class="pull-left">当前页第[[${pageInfo.pageNum}]]页，总共[[${pageInfo.pages}]]页，总共[[${pageInfo.total}]]条记录</p>
        </div>
        <!--分页-->
        <div class="modal-footer no-margin-top">
            <ul class="pagination pull-right no-margin">
                <li>
                    <a th:href="@{/to/adminmanage/selectall}">首页</a>
                </li>
                <li class="prev" th:if="${pageInfo.hasPreviousPage}">
                    <a  th:href="@{'/to/adminmanage/selectall/'+${pageInfo.prePage}}">
                        <<
                        <i class="ace-icon fa fa-angle-double-left"></i>
                    </a>
                </li>
                <!--遍历条数-->
                <li th:each="nav:${pageInfo.navigatepageNums}">
                    <a name="pageNum" th:href="@{'/to/adminmanage/selectall/'+${nav}}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}"></a>
                    <span style="font-weight: bold;background: #6faed9;" th:if="${nav == pageInfo.pageNum}" th:text="${nav}" ></span>
                </li>
                <li class="next" th:if="${pageInfo.hasNextPage}">
                    <a  th:href="@{'/to/adminmanage/selectall/'+${pageInfo.nextPage}}">
                        >>
                        <i class="ace-icon fa fa-angle-double-right"></i>
                    </a>
                </li>
                <li>
                    <a  th:href="@{'/to/adminmanage/selectall/'+${pageInfo.pages}}">尾页</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>


</body>
</html>


<script type="text/javascript">


    //delete方法
    var vue =new Vue({
        el:"#dataTable",
        methods:{
            deletefuntion:function (event){
                //获取表单元素
                alert("删除成功");
                var  delete_from= document.getElementById("delete_from");
                //获取超链接
                delete_from.action=event.target.href;
                //提交表单
                delete_from.submit();
                //阻止超链接跳转
                event.preventDefault();
            }
        }
    });


</script>